<template>
	<view class="container">
		<u-navbar
			title="个人信息" 
			:background="{backgroundColor: '#fff'}"
		></u-navbar>
		<view class="content">
			<u-form :model="queryParams" ref="form1" style="background-color: #fff;">
				<u-form-item label="昵称:" prop="nickname">
					<u-input 
						v-model="queryParams.nickname" 
						type="nickname" 
						input-align="right" 
						placeholder="请输入"
						@blur="(e)=>{ queryParams.nickname = e }"
					/>
				</u-form-item>
			</u-form>
		</view>
		<view class="saveBtn flex justify-center align-center" @tap.stop="handleSave">保存</view>
	</view>
</template>

<script setup>
import {getCurrentInstance, ref } from 'vue'
import { onLoad, onUnload } from "@dcloudio/uni-app"
const {proxy} = getCurrentInstance()
const queryParams = ref({})

onLoad(()=>{
	let info = uni.getStorageSync('USER_INFO')
	queryParams.value.avatar = info.avatar
	queryParams.value.nickname = info.nickname
})
function handleClick(){
	
}
function handleSave(){
	if(proxy.utils.isNullOrEmpty(queryParams.value.nickname)){
		proxy.tui.toast('请输入名称')
		return
	}
	proxy.api.updateUserInfo(queryParams.value).then(res=>{
		uni.$emit('changeNameSuccess')
		uni.navigateBack({
			delta: 1
		})
	})
}

</script>

<style lang="scss" scoped>
	.saveBtn{
		width: 690rpx;
		height: 88rpx;
		background: $uni-color-primary;
		margin-left: 30rpx;
		border-radius: 50rpx;
		@include str(32rpx, bold, #fff);
		line-height: 45rpx;
		margin-top: 500rpx;
	}
	.avatar-wrapper {
		padding: 0;
		margin: 0;
		width: 60rpx;
		height: 60rpx;
		background-color: raga(0, 0, 0, 0);
	}
	.container {
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		background-color: $uni-bg-color-grey;

		.content {
			width: 100vw;
			// height: 112rpx;
			@include str(28rpx, bold, #333);
			// line-height: 40rpx;
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 2rpx;
		}
	}
</style>